
<template>
   <view class="page home-page">
<view class="home-head">
     <view class="home-head-top">
      <view class="home-top-img flex">
        <view class="home-top1">
        
      </view>
      <view class="home-top2">
        
      </view>
    </view>
    <view class="home-head-text"> 
        <view class="tip"> 你好,嘻嘻嘻 </view>
        <view class="tip"> 你的心客户又增加了15名 加油吖</view>
    </view>
     </view>
     <van-divider customStyle="border-width:2PX;margin:0" />
     <view  class="user-info flex">
      <view  class="user-infos">
         <view class=" flex"> 
          <view class="line">访客:123位 </view>
          <view class="line"> 回头率:32.3% </view>
         </view>
         <view class=" flex"> 
          <view class="line">房源:123套 </view>
          <view class="line">房源关注:32.3% </view>
         </view>
         <view class="bg-number-line">
           <view > 本周新客: <text>15</text> </view> 
           <view> 排名: <text>15</text> </view> 
         
         </view>
         <view class="tip"> 你今天的每一步,都将ok</view>
      </view>  
      <view  class="user-img-warp">
      <nut-avatar size="large" shape="square" :icon=" user.avatar || userInfo.avatarUrl || 'https://img.yzcdn.cn/vant/cat.jpeg'"></nut-avatar>
      <view class="img-txt">
        {{ user.realname || userInfo.nikename || '测试' }}
      </view>
      <view class="img-txt">
        NO {{ user.userId || '-'}}
      </view>
      </view>  
     </view>
  </view>
  <van-divider customStyle="border-width:6PX;margin:0"  />
  <view class="home-nav">
     <view class="nav1" @click="toPage('/pages/publish/index')"></view>
   <view class="nav-right">
     <view class="nav2"  @click="toPage('/pages/index/search?type=1')"></view>
     <view class="nav3"  @click="toPage('/pages/index/search?type=2')"></view>
 
   </view>
  </view>
  <nut-divider customStyle="border-width:6PX" />
   <nut-cell title="二手共盘房源" :border="false" is-link value=""  @click="toPage('/pages/user/index')" />
<!--    

   <nut-list :height="50" :listData="list" @scroll="handleScroll">
        <template v-slot="{ item }">
          <div class="list-item">
            {{ item }}
          </div>
        </template>
      </nut-list>

      {
        propertyName:"测试房地产",
        ztSpace:{ insideArea:121, room:11, },
        ztPrice:{ totalPrice:341,unitPrice:12 }
      }
       -->
   <view class="main">
      <div class="list-item" @scroll="handleScroll">
            {{ item }}
          </div> 
            <view class="item flex" v-for="(item,index) in list " :key="index"  @click="onChoose">
        <view class="img"> </view>
        <view class="infos">
          <view class="title"> {{ item.propertyName }}</view>
          <view class="title"> 五年唯一物业</view>
          <view class="attr">   {{ item.ztSpace.insideArea||'-'}} m | {{ item.ztSpace.room||'-'}}房 {{ item.ztSpace.parlor||'-'}}厅 | 桂林山水</view>
          <view class="number">
            <view class="bg-number"> {{ item.ztPrice.totalPrice||'-'}}万 </view>
            <view class="size-number">  {{ item.ztPrice.unitPrice||'-'}}元/m</view>
          </view>
        </view>
        <view class="icons"> </view>
      </view>

    </view> 

    <van-divider customStyle="border-width:6PX" />
    <van-cell title="秘探学堂" :border="false" is-link value="" />
    <view class="four-view">
       <view class="flex">
         <van-image style="margin: 5PX 10px;" width="42vw" height="55px" src="https://img.yzcdn.cn/vant/cat.jpeg"  ></van-image>
         <van-image style="margin:5PX  10px;" width="42vw" height="55px" src="https://img.yzcdn.cn/vant/cat.jpeg"  />
       </view>
       <view class="flex">
         <van-image style="margin:5PX  10px;" width="42vw" height="55px" src="https://img.yzcdn.cn/vant/cat.jpeg"  />
         <van-image style="margin:5PX  10px;" width="42vw" height="55px" src="https://img.yzcdn.cn/vant/cat.jpeg"  />
       </view>
    </view>
    <view class="fixed">
      <van-image  width="30px" height="30px"  src="https://img.yzcdn.cn/vant/cat.jpeg"  data-path="/views/user/index/index" bind:click="onClickNav" /> 
    </view>

    <nut-datepicker
      v-model="currentDate"
      v-model:visible="show" 
      :is-show-chinese="true"
      @confirm="confirm"
  ></nut-datepicker> 
  
    </view>

</template>
<script>
import Taro, { useReady, useReachBottom, useDidShow } from '@tarojs/taro'

export default {
  components: {},
  data() {
    return {
      userInfo: {
        val1:"1111111"
      },
      currentDate:new Date(2022, 4, 10, 10, 10),show:true,
      user: {
        val1:"1111111"
      },
      list:[
        { propertyName:"测试房地产1", ztSpace:{ insideArea:121, room:11, }, ztPrice:{ totalPrice:341,unitPrice:12 } },
        { propertyName:"测试房地产2", ztSpace:{ insideArea:121, room:11, }, ztPrice:{ totalPrice:341,unitPrice:12 } },
      ],
    
    };
  },
  mounted() {},
  methods: {
    handleScroll(){   
      let arr = new Array(20).fill(0);
      this.list = this.list.concat(arr)   
    },
    onChoose (e) {
      console.log(e);
    },
  },
};
</script>  

<style >

.home-top-img{
  justify-content: space-between;
}
.home-top1{
  width: 50px;
  height: 50px;
  background: url(http://house-detective.oss-cn-guangzhou.aliyuncs.com/top1.png) center center / 100% 100%;
 border-radius: 50%;  
} 

  .home-top2{
    width: 100px;
    height: 50px;
    background: url(http://house-detective.oss-cn-guangzhou.aliyuncs.com/app1.png) center center / 100% 100%;
  } 
  

.home-head-top{
  background: #F9CF00;
  padding: 10px 20px;
}
.home-head-text{
  position: relative;
  margin-top: 10px;
  background: #fff;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 12px;
}
.home-head-text:before{
  content:"";
  border:10px solid transparent;
  border-bottom-color:#fff;
  position:absolute;
  left:20px;
  top:0;
  margin-top:-20px;

}
.home-head-text:after{
  content:"";
  border:10px solid transparent;
  border-bottom-color:white;
  position: absolute;
  top:0;
  left:20px;
  margin-top:-19px;
}
/**/
.user-info{
  padding:10px;
}
.line,.user-infos{
  flex: 1;
}
.bg-number-line{
  display: flex;
}
.bg-number-line view{
  margin-right: 20px;
  font-weight: 600;
}
.bg-number-line text{
  font-size: 24px;
}
.tip{
  font-weight: 600;
  margin-top: 10px;
}
.user-img-warp{
  border: 1px solid #CCC;
  background: #F9CF00;
}
.img-txt{
  font-size: 12px;
  margin-top: 5px;
}
/**/
.home-nav{
  display: flex;
  padding: 10px 10px 0 10px;
}
.nav1{
  width: 150px;
  height: 110px;
  background: url(http://house-detective.oss-cn-guangzhou.aliyuncs.com/nav1.png) center center / 100% 100%;
}
.nav2{
  width: 200px;
  height: 50px;
  background: url(http://house-detective.oss-cn-guangzhou.aliyuncs.com/nav2.png) center center / 100% 100%;
}
.nav3{
  width: 200px;
  height: 50px;
  margin-top: 10px;
  background: url(http://house-detective.oss-cn-guangzhou.aliyuncs.com/nav3.png) center center / 100% 100%;
}

.nav-right{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 10px;
}
.item {
  margin: 10px;
  align-items:flex-start;
}
.img {
  width: 100px;
  height: 80px;
  background: url(https://unsplash.it/600/300?random) center center / 100% 100%;
  margin-right: 20px;
}
.infos {
  flex: 1;
}
.title{
   color: #000;
   font-size: 14PX;
   font-weight: 600;
}
.attr{
  color: #ccc;
}
.number{
  display: flex;
  align-items: flex-end;
}
.bg-number{
  font-size: 18PX;
   font-weight: 600;
}
.size-number{
 color: #ccc;
 margin-left: 10px;
}
.icons {
  width: 40px;
  height: 60px; 
}

/**/

.four-view>.flex{
  margin: 0 10px;
}
.fixed{
  position: fixed;
  right: 20px;
  bottom: 80px;
  z-index: 10;
} 
</style>